<template>
    <view class="page">
        <MagicNavigationBar 
            :items="items" 
            :digHolePosition="1" 
            :selectedColor="'red'" 
            :color="'blue'"
            @onIndicatorClick="handleClick" 
            :current="currentTab" 
            @onTabSelect="onTab"
            :backgroundColor="'white'"
            :leftDigHoleColor="'transparent'"
            :rightDigHoleColor="'transparent'"
            :indicatorBorderColor="'#F7F7F7'"
            :indicatorBackground="'linear-gradient(to right, #FFA049,#FF4B0C)'"
            :indicatorSize="60" 
        >
            <template v-slot:indicatorContent>
                <view style="display: flex;justify-content: center;align-items:center;width: 100%;height: 100%;">
                    <image src="/static/示警.png" mode="" style="width: 50rpx; height: 50rpx; "></image>
                </view>
            </template>
        </MagicNavigationBar>
    </view>
</template>

<script>
import MagicNavigationBar from "@/uni_modules/jorbin-DigHoleNavigationBar/components/jorbin-DigHoleNavigationBar/jorbin-DigHoleNavigationBar.vue";

export default {
    components: {
        MagicNavigationBar
    },
    props: {
        // 新增 prop 用于接收父组件传来的 currentTab
        currentTab: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            img: require("@/static/home.png"),
            selectedColor: 'red',
            items: [
                {
                    icon: { src: require("@/static/首页@2x.png"), width: 30, height: 30 },
                    text: '首页',
                    url: "/pages/index/index",
                    selectedIcon: { src: require("@/static/home_red.png") }
                },
                {
                    type: 'indicator',
                    text: '上传',
					url: "/pacakgeRepair/pages/packageRepairDetail/packageRepairDetail",
                },
                {
                    icon: { src: require("@/static/notice.png"), width: 30, height: 30 },
                    url: "/pages/my/my",
                    text: '我的',
                    selectedIcon: { src: require("@/static/home_red.png") }
                }
            ]
        };
    },
    watch: {
        // 监听 currentTab 的变化
        currentTab(newVal) {
            console.log('接收到父组件传来的 currentTab:', newVal);
        }
    },
    methods: {
        onTab(index, item) {
            console.log(index, item);
            console.log(item.url);
            this.$emit('updateCurrentTab', index);
            uni.redirectTo({
                url: item.url
				// url:"/pacakgeRepair/pages/packageRepairDetail/packageRepairDetail"
            });
        },
        handleClick() {
          
			uni.navigateTo({
			   
				url:"/pages/rescue/rescue"
			});
        },
        // 新增方法，用于接收子组件传递的 currentTab 值
        updateCurrentTab(newCurrentTab) {
            console.log("接收到", newCurrentTab);
            this.$emit('updateCurrentTab', newCurrentTab);
        }
    }
};
</script>

<style>
    .indicator-before{
        top: 60rpx !important;
    }
</style>